<template>
	<view>
		<image :src="path" mode="widthFix" style="width: 100%;"></image>
		<l-painter  :board="poster" isCanvasToTempFilePath @success="path = $event" hidden />
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { queryUserTrends } from '@/utils/api/index.ts'
	const httpUrl = ref(getApp().globalData.baseUrl)
	const path = ref('')
	const posterObject = ref<any>({})
	const poster = ref({})
	onLoad(async (option) => {
		const data = {
			pageNo: 1,
			pageSize: 1,
			longitude: 0,
			latitude: 0,
			queryType: 'FIND',
			id: option.id
		}
		const res = await queryUserTrends({ data: data })
		posterObject.value = res.data.list[0]
		if (res.data.list[0].fileList.length) {
			if (posterObject.value.fileType == 'VIDEO') {
				path.value = `${httpUrl.value}/app/file/viewFile?fileId=${res.data.list[0].fileList[0].id}&process=video/snapshot,t_1000,f_jpg,w_${res.data.list[0].fileList[0].width},h_${res.data.list[0].fileList[0].height},m_fast`
			} else {
				path.value = `${httpUrl.value}/app/file/viewFile?fileId=${res.data.list[0].fileList[0].id}`
			}
		}
		poster.value = {
			css: {
				width: "750rpx",
				paddingBottom: "40rpx",
				// background: "linear-gradient(,#000 0%, #ff5000 100%)"
			},
			views: [
				{
					src: `${httpUrl.value}/app/file/viewFile?fileId=${uni.getStorageSync('avatarId')}`,
					type: "image",
					css: {
						background: "#fff",
						objectFit: "cover",
						marginLeft: "40rpx",
						marginTop: "40rpx",
						width: "84rpx",
						border: "2rpx solid #fff",
						boxSizing: "border-box",
						height: "84rpx",
						borderRadius: "50%"
					}
				},
				{
					type: "view",
					css: {
						marginTop: "40rpx",
						paddingLeft: "20rpx",
						display: "inline-block"
					},
					views: [
						{
							text: uni.getStorageSync('userName'),
							type: "text",
							css: {
								display: "block",
								paddingBottom: "10rpx",
								color: "rgba(0,0,0,.8)",
								fontSize: "32rpx",
								fontWeight: "bold"
							}
						},
						{
							text: res.data.list[0].title,
							type: "text",
							css: {
								color: "rgba(0,0,0,.8)",
								fontSize: "40rpx"
							},
						}
					],
				},
				{
					css: {
						marginLeft: "40rpx",
						marginTop: "30rpx",
						padding: "32rpx",
						boxSizing: "border-box",
						background: "#fff",
						borderRadius: "16rpx",
						width: "670rpx",
						boxShadow: "0 20rpx 58rpx rgba(0,0,0,.15)"
					},
					views: [
						{
							src: path.value,
							type: "image",
							css: {
								objectFit: "cover",
								objectPosition: "50% 50%",
								width: "606rpx",
							},
						}, {
							css: {
								marginTop: "32rpx",
								color: "#FF0000",
								fontWeight: "bold",
								fontSize: "28rpx",
								lineHeight: "1em"
							},

							type: "view"
						}, {
							css: {
								marginTop: "32rpx",
								fontSize: "26rpx",
								color: "#8c5400"
							},
							type: "view"
						}, {
							css: {
								marginTop: "30rpx"
							},
							views: [
								{
									text: res.data.list[0].content,
									type: "text",
									css: {
										paddingRight: "32rpx",
										boxSizing: "border-box",
										lineClamp: 2,
										color: "#333333",
										lineHeight: "1.8em",
										fontSize: "36rpx",
										width: '606rpx'
									},
								},
							],
							type: "view"
						}],
					type: "view"
				}
			]
		}

	})
</script>

<style lang="scss" scoped>
</style>